<template>
  <div class="listContentBox">
    <!--    <advancedQueryShrinkComponent ref="advancedQueryShrinkComponent" :labelLength="4" :queryData="queryData" @getQuery="getList" />-->
    <div class="listBox p-rem-l-24 p-rem-r-24 p-rem-t-16 p-rem-b-16">
      <el-row class="listBoxbtn m-rem-b-16">
        <el-col :span="24">
          <el-button type="primary" @click="handleDialog('add','新增','')">新增</el-button>
        </el-col>
      </el-row>
      <div class="listBoxTable">
        <el-table v-loading="listLoading" height="100%" :data="list">
          <el-table-column label="图标" prop="icon">
            <template slot-scope="scope">
              <div
                :style="{background: scope.row.modelBackgroundColor, width:'6rem',height:'6rem', 'border-radius':'1rem','text-align':'center',position:'relative',left:'32%'}"
              >
                <img v-if="scope.row.iconList.length"
                     style="position: absolute;margin: auto;top: 0;bottom: 0;left: 0;right: 0;width: 4.5rem;height: 4.5rem;"
                     :src="scope.row.iconList[0].annexPath" alt=""
                />
              </div>
            </template>
          </el-table-column>
          <el-table-column label="系统名称" prop="modelName"></el-table-column>
          <el-table-column label="系统编码" prop="modelCode"></el-table-column>
          <el-table-column label="前端端口" prop="ipAddress"></el-table-column>
          <el-table-column label="后台端口" prop="apiPort"></el-table-column>
          <el-table-column label="路径" prop="rootPath"></el-table-column>
          <!--      <el-table-column label="是否是子系统" prop="isSubSystem">-->
          <!--        <template slot-scope="scope">-->
          <!--          <el-switch v-model.trim="scope.row.isSubSystem" active-value="0" inactive-value="1"/>-->
          <!--        </template>-->
          <!--      </el-table-column>-->
          <el-table-column label="是否启用" prop="enableStatus">
            <template slot-scope="scope">
              <el-switch v-model.trim="scope.row.enableStatus" active-value="0" inactive-value="1"
                         @change="handleStatusChange(scope.row)"
              />
            </template>
          </el-table-column>
          <el-table-column label="排序" prop="sort"></el-table-column>
          <el-table-column label="操作" fixed="right" width="120">
            <template slot-scope="scope">
              <el-button type="text" @click="handleDialog('edit','修改',scope.row)">修改</el-button>
              <el-button type="text" typeC="danger" @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
          <!-- 列表缺省 -->
          <div slot="empty" class="zjm_no_data_table_list height-100 flex row-center col-center">
            <el-empty :image-size="70" description="暂无数据"></el-empty>
          </div>
        </el-table>
      </div>
      <div class="pagination-container">
        <el-pagination
          v-if="list.length != 0"
          :current-page.sync="queryData.queryParams.pageNum"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="queryData.queryParams.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="listTotal"
          :background="true"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
    </div>
    <dialogForm ref="dialogForm" />
  </div>
</template>

<script>
// 混入
import { listMixins } from '@/mixins/publicMixins/listMixins'
// 组件
import advancedQueryShrinkComponent from '@/components/publicComponents/advancedQuery/indexShrink'
import dialogForm from './dialogForm'
// ---------------------------------------------------------------------------------------
export default {
  name: 'Dict',
  mixins: [listMixins],
  components: { advancedQueryShrinkComponent, dialogForm },
  provide() {
    return {
      listQueryParams: this
    }
  },
  data() {
    return {
      // 查询条件+查询组
      queryData: {
        queryParams: {
          pageNum: 1, // 分页的初始值
          pageSize: 10 // 每页的显示数
        },
        data: []
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    /**
     * @description: 列表
     * @Author: baoxuhui
     * @param {*} queryParams
     * @return {*}
     */
    getList() {
      this.getListMixins('/models/getPageTwo', this.queryData.queryParams)
    },
    handleSizeChange(val) {
      this.queryData.queryParams.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.queryData.queryParams.pageNum = val
      this.getList()
    },
    /**
     * @description: 删除
     * @Author: baoxuhui
     * @param {*} row
     * @return {*}
     */
    handleDelete(row) {
      this.handleDeleteMixins('/models/removeById', { id: row.id })
    },
    /**
     * @description: 打开弹窗
     * @Author: baoxuhui
     * @param {*} type//弹窗状态，add:'新增'，edit:修改，view:'详情'
     * @param {*} typName//弹窗title '新增'，修改，'详情'
     * @param {*} row//参row
     * @return {*}
     */
    handleDialog(type, typName, row) {
      this.$refs['dialogForm'].dialogResetForm()
      this.$refs['dialogForm'].dialogFormVisibleBool = true
      this.$refs['dialogForm'].dialogFormType = type
      this.$refs['dialogForm'].dialogFormTitle = typName
      if (type !== 'add') {
        this.$refs['dialogForm'].dialogDetailApi(row)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.listBox {
  height: calc(100% - 3.5rem - 1.6rem);
}
</style>
